<template>
	<div class="changePhone">
		<div class="changePhone_items">
			<div class="changePhone_items_left">
				<div>新手机号</div> <input type="number" v-model="Phone" maxlength="11" value="" placeholder="请输入" />
			</div>
			<div class="changePhone_items_right" @click='sendCode'>
				{{codeText}}
			</div>
		</div>
		<div class="changePhone_items">
			<div class="changePhone_items_left">
				<div>验证码</div> <input type="number" v-model="SMSCode" maxlength="11" value="" placeholder="请输入" />
			</div>
		</div>
		<!-- btn -->
		<div class="changePhone_btn" @click='sendUserPhone'>
			确认修改
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				showBtnOn: false,
				Phone: '',
				codeText: '获取验证码',
				SMSCode:''
			}
		},
		methods: {
			async sendCode() {
				let that = this
				const reg = /^(0|86|17951)?(1[0-9])[0-9]{9}$/;
				if (!reg.test(this.Phone)) {
					uni.showToast({
						title: "手机号格式有误",
						mask: true,
						icon: "none",
						duration: 1000
					})
					return;
				}
				if (this.showBtnOn == true) return
				const {
					data
				} = await this.$request(this.$Api.loginSMS, {
					phone: this.Phone,
				}, "POST")
				var time = 60;
				var timer = setInterval(() => {
					time--;
					this.codeText = time + "秒重发"
					this.showBtnOn = true;
					if (time == 0) {
						clearInterval(timer);
						this.codeText = "获取验证码";
						this.showBtnOn = false;
					}
					console.log("codeTextcodeText", this.codeText)
				}, 1000);
			},
			async sendUserPhone() {
				const {
					data
				} = await this.$request(this.$Api.userPhone, {phone:this.Phone,code:this.SMSCode}, "POST")
				if (data.code != 0) return
				uni.showToast({
					title: "修改成功",
					mask: true,
					icon: "none",
					duration: 1000
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 800)
			}
		}
	}
</script>

<style lang="scss">
	.changePhone {
		padding: 28rpx 0;
		box-sizing: border-box;

		.changePhone_items {
			width: 750rpx;
			height: 100rpx;
			border-bottom: 1rpx solid #C9C9C9;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			box-sizing: border-box;
			background: #fff;

			.changePhone_items_left {
				display: flex;
				font-size: 24rpx;
				line-height: 100rpx;

				div {
					margin-right: 100rpx;
					width: 100rpx;
				}

				input {
					height: 100rpx;
					line-height: 100rpx;
				}
			}
		}

		.changePhone_items:last-child {
			// border: none !important;
		}



		.changePhone_items_right {
			width: 140rpx;
			height: 40rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #9013FE;
			line-height: 40rpx;
			text-align: right;
			font-style: normal;
		}

		.changePhone_btn {
			width: 146rpx;
			height: 44rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 44rpx;
			text-align: right;
			font-style: normal;
			width: 686rpx;
			height: 90rpx;
			background: #9013FE;
			margin: 44rpx auto;
			text-align: center;
			line-height: 90rpx;
		}
	}
</style>